<template>
    <div ref="chartdiv" class="chart-div">


    </div>

</template>

<script>
import config from '~/config';
import dayjs from '~/plugins/day';

import echarts from 'echarts';
export default {
    props:['id','stockInfo'],
    data(){
        var record_id = this.id;
        return{
            record_id : this.stockInfo?null:record_id,
            curchart : null,
            data : this.stockInfo?this.stockInfo:{},
        }
    },
    mounted(){
        if(this.id){
            this.getRecordById();
        }else if(this.data.code){
            this.initChart();
        }
    },
    computed: {
    },
    methods:{
        getRecordById(){
            if(!this.record_id) return;
            if(!this.$axios) return;
            this.$axios.get(`${config.sapi}/api/stock/getRecordById?id=${this.record_id}`)
            .then((res) => {
                if (res.data.code == 200) {
                    this.data = res.data.data;
                    if(this.data.code && this.data.detail_data){
                        this.data.detail_data = JSON.parse(this.data.detail_data);
                        this.initChart();
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        initChart(){
            const container = this.$refs.chartdiv;
            if (container) {
                this.curchart = echarts.init( container );
                const option = this.getOption();
                this.curchart.setOption(option);
            }
        },
        getOption(){
            var info = this.data;
            var datearr = [];
            var pricearr = [];
            var gzarr = [];
            var record_date = info.record_date.substring(0,10);
            if(!info.detail_data) return;
            for(var i=info.detail_data.length-1;i>=0;i--){
                var item = info.detail_data[i];
                datearr.push(item.date);
                pricearr.push(item.price);
                if(item.p){
                    gzarr.push(item.p);
                }else{
                    gzarr.push(item.present);
                }
            }
            return {
                color: ['#F4C51F', '#3C9DFA','#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                title: {
                    text: info.name+"("+info.code+")数据图",
                    subtext: '港资数据波动',
                    left: 'center',
                    align: 'right'
                },
                grid: {
                    left: 50,
                    right: 50,
                    bottom: 30
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {},
                        myTool1: {
                            show: true,
                            title: '打开东方财富',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            // icon: 'image://http://echarts.baidu.com/images/favicon.png',
                            onclick: function (){
                                var code = info.code;
                                var url = "";
                                if("6"==code.substring(0,1)){
                                    url = "http://quote.eastmoney.com/sh"+code+".html";
                                }else{
                                    url = "http://quote.eastmoney.com/sz"+code+".html";
                                }
                                window.open(url);
                            }
                        },
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        animation: false,
                        label: {
                            backgroundColor: '#505765'
                        }
                    },
                    formatter: (arr, ticket, callback) => {
                        var desc = "";
                        arr.map((item)=>{
                            if(desc.length==0){
                                desc += item.name+"</br>";
                            }
                            var diff = "";
                            if(item.dataIndex>2){
                                if(item.seriesName =="价格"){
                                    diff = ((pricearr[item.dataIndex]-pricearr[item.dataIndex-1])*100/pricearr[item.dataIndex-1]).toFixed(2);
                                    diff = " (" + diff +"%)";
                                }else {
                                    diff = (gzarr[item.dataIndex]-gzarr[item.dataIndex-1]).toFixed(2);
                                    diff = " (" + diff +")";
                                }
                            }
                            desc += item.seriesName +": "+ item.value + diff +"</br>";
                            //dataIndex
                        })
                        return desc;
                    }
                },
                legend: {
                    data: ['价格', '港资占比'],
                    left: 10
                },
                xAxis: [
                    {
                        type: 'category',
                        // boundaryGap: false,
                        // axisLine: {onZero: false},
                        data: datearr
                    }
                ],
                yAxis: [
                    {
                        name: '价格',
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle:{
                                color: ['lightgray'],
                                width: 1,
                                type: 'dashed'
                            }
                    　　},
                        min: function (value) {
                            return parseInt(value.min);
                        }
                        // max: 500
                    },
                    {
                        name: '港资占比',
                        splitLine:{show: false},
                        // max: 5,
                        type: 'value',
                        min: function (value) {
                            if(value.min>3){
                                return parseInt(value.min);
                            }else{
                                return parseInt(value.min/2);
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '价格',
                        type: 'line',
                        animation: false,
                        lineStyle: {
                            width: 1
                        },
                        showAllSymbol : true,
                        symbol: function(value,param){
                            return "circle"
                            // if(param.name ==record_date){
                            //     return "circle"
                            // }else{
                            //     return "none"
                            // }
                        },
                        symbolSize: function(value,param){
                            if(param.name ==record_date){
                                return 8
                            }else{
                                return 4
                            }
                        },
                        data: pricearr
                    },
                    {
                        name: '港资占比',
                        type: 'line',
                        yAxisIndex: 1,
                        animation: false,
                        lineStyle: {
                            width: 1
                        },
                        showAllSymbol : true,
                        symbol: function(value,param){
                            return "circle"
                            // if(param.name ==record_date){
                            //     return "circle"
                            // }else{
                            //     return "none"
                            // }
                        },
                        symbolSize: function(value,param){
                            if(param.name ==record_date){
                                return 8
                            }else{
                                return 4
                            }
                        },
                        data: gzarr
                    }
                ]
            };
        }
    }
}
</script>

<style lang="less" scope>

.chart-div{
    width: 100%;
    height: 400px;
}

</style>